<template>
  <div class="container">
    <!-- 幻灯片 -->
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <div
          class="banner-image"
          :style="`
                background:url(${item.url}) center center no-repeat;
                background-size:contain contain;
                `"
        ></div>
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索框 -->
    <!-- 搜索框 -->
    <div class="banner-content">
      <div class="search-bar">
        <!-- tab栏 -->
        <el-row type="flex" class="search-tab">
          <!-- 
            实现按钮高亮效果：
              点击哪个按钮 给哪个按钮添加active即可
              如何知道用户点击了哪个按钮呢？
              答：我们可以保存用户点击的按钮下标值，当下标值等于0的时候说明点击的是“攻略”
                  1的时候点击的时候“酒店”，2的时候点击的是机票。
                因此我们就可以通过保存起来的按钮下标值来判断用户点击了哪个按钮。
            
            实现步骤：
              1、声明变量，点击按钮的是保存对应的下标值
              2、根据保存的下标值动态绑定类名
           -->
          <span
            v-for="(item, index) in options"
            :key="index"
            :class="{active: currentOption === index}"
            @click="handleOption(index)"
          >
            <i>{{ item.name }}</i>
          </span>
        </el-row>

        <!-- 输入框 -->
        <el-row type="flex" align="middle" class="search-input">
          <input
            :placeholder="options[currentOption].placeholder"
            v-model="searchValue"
            @keyup.enter="handleSearch"
          />
          <!-- 搜索按钮 -->
          <i class="el-icon-search" @click="handleSearch"></i>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      banners: [
        {
          url: "http://210.21.98.31:6004/assets/images/th03.jfif",
        },
        {
          url: "http://210.21.98.31:6004/assets/images/th04.jfif",
        },
      ],
      options: [
        // 搜索框tab选项
        {
          name: "攻略",
          placeholder: "搜索城市",
          pageUrl: "/post?city=",
        },
        {
          name: "酒店",
          placeholder: "请输入城市搜索酒店",
          pageUrl: "/hotel?city=",
        },
        {
          name: "机票",
          placeholder: "请输入出发地",
          pageUrl: "/air",
        },
      ],
      searchValue: "", // 搜索框的值
      currentOption: 0, // 当前选中的选项，用户点击按钮的下标值
    };
  },
  mounted() {
    // mounted 这个函数是vue内置的函数，是进入页面的时候自动执行的。
    // 这里调用methods中的函数必须通过this来调用，这个是vue框架规定的
    this.getBanner();
  },
  methods: {
    // 保存点击按钮的下标值
    handleOption(index){
      this.currentOption = index
      // console.log("下标值",this.currentOption);
      // 判断当点击“机票”的时候 要跳转到机票页面
      let item = this.options[index]
      if(item.name === "机票"){
        // 页面跳转语法：this.$router.push(跳转的路径)
        this.$router.push(item.pageUrl)
      }
    },
    // 搜索
    handleSearch(){
      // 如何知道我们搜索的是“攻略”还是“酒店”呢？
      // 答：我们可以通过保存起来的下标值currentOption判断
      // console.log(112, this.searchValue);
      let item = this.options[this.currentOption]
      // 跳转页面 跳转的时候需要在路径上拼接搜索的内容
      this.$router.push(item.pageUrl + this.searchValue)
    },
    /**
     * 我们前端展示在项目中的数据（图片 文字 等等）一般都是由后端提供的
     * 后端通过什么方式提供呢？答：后端通常会通过一些方法来提供数据给前端，
     * 前端只需要通过 " 特定的函数 " 来调用后端的方法即可获取到数据。
     * 这些后端提供的方法 我们就叫他 “Api/接口”
     *
     * 后端会提供一个接口文档给前端，前端就可以通过这个文件知道获取数据对应的接口时哪一个。
     *
     * 怎么调用后端提供的接口呢？
     * 答：在这个项目中使用的是axios插件来调动
     *
     * */
    // 获取轮播图数据
    getBanner() {
      this.$axios({
        url: "/scenics/banners",
      }).then((res) => {
        // res 调用后端提供的接口返回的数据
        // console.log(57,res);
        this.banners = res.data.data;
        // 注意后端返回的图片地址是不完整的 因此需要前端自行拼接
        // 拼接接口基地址
        this.banners.forEach((item) => {
          // forEach相当于for循环，所以这里的
          // 可以循环得到banners数组中的每一个元素
          // 这个元素就是item
          // this.$axios.defaults.baseURL  是接口基地址，固定写法获取
          item.url = this.$axios.defaults.baseURL + item.url;
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
.container{
    min-width:1000px;
    margin:0 auto;
    position:relative;

    /deep/ .el-carousel__container{
        height:700px;
    }

    .banner-image{
        width:100%;
        height:100%;
    }

    .banner-content{
        z-index:9;
        width:1000px;
        position:absolute;
        left:50%;
        top:45%;
        margin-left: -500px;
        border-top:1px transparent solid;

        .search-bar{
            width:552px;
            margin:0 auto;
        }

        .search-tab{
            .active{
                i{
                color:#333;
                }
                &::after{
                background: #eee;
                }
            }

            span{
                width:82px;
                height:36px;
                display:block;
                position: relative;
                margin-right:8px;
                cursor: pointer;

                i{
                position:absolute;
                z-index:2;
                display: block;
                width:100%;
                height:100%;
                line-height:30px;
                text-align:center;
                color:#fff;
                }

                &:after{
                position: absolute;
                left:0;
                top:0;
                display:block;
                content: "";
                width:100%;
                height:100%;
                border: 1px rgba(255,255,255,.2) solid;
                border-bottom: none;
                transform: scale(1.1,1.3) perspective(.7em) rotateX(2.2deg);
                transform-origin: bottom left;
                background: rgba(0,0,0,.5);
                border-radius:1px 2px 0 0;
                box-sizing:border-box;
                }
            }
        }

        .search-input{
            width:550px;
            height:46px;
            background:#fff;
            border-radius: 0 4px 4px 4px;
            border: 1px rgba(255,255,255,.2) solid;
            border-top:none;
            box-sizing: unset;

            input{
                flex:1;
                height:20px;
                padding: 13px 15px;
                outline: none;
                border:0;
                font-size:16px;
            }

            .el-icon-search{
                cursor :pointer;
                font-size:22px;
                padding:0 10px;
                font-weight:bold;
            }
        }
    }
}
</style>